import React from "react";
import { MinusCircleOutlined, PlusOutlined } from "@arco-design/web-react/icon";
import { Select, Button, Form, Input, Card, Space } from "@arco-design/web-react";
// import { Wrapper } from "./style";

const formItemLayout = {
	labelCol: {
		xs: {
			span: 24
		},
		sm: {
			span: 4
		}
	},
	wrapperCol: {
		xs: {
			span: 24
		},
		sm: {
			span: 20
		}
	}
};
const formItemLayoutWithOutLabel = {
	wrapperCol: {
		xs: {
			span: 24,
			offset: 0
		},
		sm: {
			span: 20,
			offset: 4
		}
	}
};

export default function CuDataConfig() {
	// 接口选择
	const onChange = value => {
		console.log(`selected ${value}`);
	};
	const onSearch = value => {
		console.log("search:", value);
	};

	// 接口绑定
	const onFinish = values => {
		console.log("Received values of form:", values);
	};

	return (
		<div>
			<Space
				direction="vertical"
				size="middle"
				style={{
					display: "flex"
				}}>
				<Card
					title="选择接口"
					bordered={false}
					size="small"
					style={{
						width: "100%"
					}}>
					<Select
						showSearch
						placeholder="Select a person"
						optionFilterProp="children"
						onChange={onChange}
						onSearch={onSearch}
						filterOption={(input, option) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase())}
						options={[
							{
								value: "jack",
								label: "Jack"
							},
							{
								value: "lucy",
								label: "Lucy"
							},
							{
								value: "tom",
								label: "Tom"
							}
						]}
					/>
				</Card>
				<Card
					title="接口数据绑定"
					bordered={false}
					size="small"
					style={{
						width: "100%"
					}}>
					<Form
						name="dynamic_form_item"
						{...formItemLayoutWithOutLabel}
						onFinish={onFinish}
						style={{
							maxWidth: 600
						}}>
						<Form.List
							name="names"
							rules={[
								{
									validator: async (_, names) => {
										if (!names || names.length < 2) {
											return Promise.reject(new Error("At least 2 passengers"));
										}
									}
								}
							]}>
							{(fields, { add, remove }, { errors }) => (
								<>
									{fields.map((field, index) => (
										<Form.Item {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)} label={index === 0 ? "Passengers" : ""} required={false} key={field.key}>
											<Form.Item
												{...field}
												validateTrigger={["onChange", "onBlur"]}
												rules={[
													{
														required: true,
														whitespace: true,
														message: "Please input passenger's name or delete this field."
													}
												]}
												noStyle>
												<Input
													placeholder="passenger name"
													style={{
														width: "60%"
													}}
												/>
											</Form.Item>
											{fields.length > 1 ? <MinusCircleOutlined className="dynamic-delete-button" onClick={() => remove(field.name)} /> : null}
										</Form.Item>
									))}
									<Form.Item>
										<Button
											type="dashed"
											onClick={() => add()}
											style={{
												width: "60%"
											}}
											icon={<PlusOutlined />}>
											Add field
										</Button>
										<Button
											type="dashed"
											onClick={() => {
												add("The head item", 0);
											}}
											style={{
												width: "60%",
												marginTop: "20px"
											}}
											icon={<PlusOutlined />}>
											Add field at head
										</Button>
										<Form.ErrorList errors={errors} />
									</Form.Item>
								</>
							)}
						</Form.List>
						<Form.Item>
							<Button type="primary" htmlType="submit">
								Submit
							</Button>
						</Form.Item>
					</Form>
				</Card>
			</Space>
		</div>
	);
}
